{% extends "adminBase.html" %}

{% block bodyid %}tab2{% endblock %}

{% block sectionDivID %}experiments{% endblock %}

{% block adminContent %}
<script type="text/javascript" src="/site_media/scripts/jquery/jquery.pack.js"></script>
<script type="text/javascript" src="/site_media/scripts/yav.js"></script>
<script type="text/javascript" src="/site_media/scripts/jquery/jquery.yav.pack.js"></script>
<script type="text/javascript" src="/site_media/scripts/jquery/jquery.tablesorter.pack.js"></script>
<script type="text/javascript" src="/site_media/scripts/jquery/jquery.impromptu.1.0.js"></script>


<script type="text/javascript" charset="utf-8">
	// prepare the form when the DOM is ready 
	$(document).ready(function() { 
		
		$(".slideToggler").bind("click", function(){
			$('.createNewThing').slideToggle(500);
		});
		$("#createNewForm").yav({
			errorClass:"error",
			errorTag:"p",
			errorPosition:"after"			
		},{
			inputclasserror: "fieldError",
		});
		
		$("#experimentTableID").tablesorter({widgets: ['zebra']});
		
		//Require a confirm step for deleting
		$(".deleteLink").click(function(){
			msg  = 'Are you sure you want to delete this experiment?';
			msg += '<input type="hidden" value="'+this.id+'" id="itemID"/>';
			msg += '<input type="hidden" value="'+this.href+'" id="itemHref"/>';
			$.prompt(msg, { buttons: { Yes: "Yes", No: "No" }, 
							callback: deleteItem, 
							show:"fadeIn",
							container: "html",
							opacity: 0.8,
							overlayspeed: "fast"
							});
			return false;
		});
		
		function deleteItem(buttonValue, msg){
			if(buttonValue == "No"){
				return;
			} else {
				itemID = msg.children('#itemID').val();
				itemHref = msg.children('#itemHref').val();
				$.ajax({url: itemHref, success:function(){
					location.reload();
				}});
			}
		}
	});

</script>
<h1>Experiments</h1>
<div class="helpText"> 
<p>An experiment is an ordered collection of components. You can create a new experiment with the link below.</p>
</div>
<p><a href="#" class="slideToggler">Create a new experiment</a></p>
<div class="createNewThing">
	<form action="/experiments/edit/newExperiment/" method="post" accept-charset="utf-8" id="createNewForm">
		<p><label for="experimentName">Name:<br>
			<input type="text" name="experimentName" value="" id="experimentName" class="required" title="You must enter a name."></label></p>
		<p><input type="button" value="Cancel" class="buttonSmall slideToggler"/> <input class="buttonSmall" type="submit" value="Create Experiment"></p>
	</form>
</div>
<br/><br/>
<h3>Existing experiments table</h3>
<table class="experimentTable" id="experimentTableID">
	<thead>
	<tr><th>Name</th><th>Date Created</th><th>Actions</th></tr>
	</thead>
	<tbody>
	{% for e in experiments %}
	<tr id="row_{{ e.id }}">
		<td>{{ e.name }}</td>
		<td>{{ e.dateCreated }}</td>
		
		<!--
			TODO Add Delete confirmation
		-->
		<td><!-- <a href="/experiments/view/?id={{ e.id }}">View</a> |  --><a href="/experiments/edit/?id={{ e.id }}">Edit</a> | <a href="/experiments/delete/?eid={{ e.id }}" class="deleteLink" id="{{ e.id }}">Delete</a></td>
	
	</tr>
	{% endfor %}
	</tbody>
</table>

{% endblock %}
